<script setup lang="ts">
import dayjs from "dayjs";
import { ref } from "vue";
import { Search } from "@element-plus/icons-vue";
import { searchFlowCount, searchFlowList, searchFlowDetail } from "@/api/apply";
import { CircleCloseFilled } from "@element-plus/icons-vue";
//表單數據格式
interface dataForm {
  docid: string;
  applier: string;
  apply_date: string;
  current_flow: number;
  current_flow_phase: string;
  last_update_time: string;
  org_code: string;
  end_status: string;
}
//查詢條件
interface queryForm {
  docid: string;
  start_time: string;
  end_time: string;
  username: string;
  page: number;
  end_status: string;
}

interface dataFlow {
  docid: string;
  flow_code: number;
  flow_phase: string;
  chinese_name: string;
  approve: string;
  comments: string;
  last_update: string;
}

const queryFormPara = ref<queryForm>({
  username: "",
  docid: "",
  start_time: dayjs(new Date().setMonth(new Date().getMonth() - 3)).format(
    "YYYY-MM-DD"
  ),
  end_time: dayjs().format("YYYY-MM-DD"),
  page: 1,
  end_status: ""
});

const tableData = ref<dataForm[]>([]);
const flowitems = ref<dataFlow[]>([]);
const showdetail = ref(false);
const counts = ref(0);

function searchResult() {
  let param = {
    username:
      localStorage.getItem("username")?.toString() === undefined
        ? ""
        : localStorage.getItem("username")?.toString(),
  };
  param = { ...queryFormPara.value, ...param };
  searchFlowCount(JSON.stringify(param)).then((res: any) => {
    if (res[0].total > 0) {
      counts.value = res[0].total;
      searchFlowList(JSON.stringify(param)).then((res: any) => {
        if (res) {
          tableData.value = []
          res.forEach((item: dataForm) => {
            tableData.value.push(item);
          });
        }
      });
    }
    else{
      tableData.value = []
    }
  });
}

function handleCurrentChange() {
  searchResult();
}

//日期格式
function formatter(date: string) {
  if (date) {
    return dayjs(date).format("YYYY-MM-DD HH:mm");
  }
}

function showFlowDetail(docid: string) {
  flowitems.value = [];
  searchFlowDetail(docid).then((res: any) => {
    res.forEach((item: dataFlow) => {
      item.approve = item.approve === "Y" ? "已審核" : "審核中";
      flowitems.value.push(item);
    });
  });
  showdetail.value = true;
}

function closeDetail() {
  showdetail.value = false;
}
</script>

<template>
  <main>
    <div class="due_to_box">
      <el-form :model="queryFormPara" :inline="true" style="width: 1200px">
        <el-form-item label="單號" style="padding-left: 28px">
          <el-input v-model.trim="queryFormPara.docid" style="width: 180px" />
        </el-form-item>
        <el-form-item label="日期開始">
          <el-date-picker
            v-model="queryFormPara.start_time"
            style="width: 180px"
            value-format="YYYY-MM-DD"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="日期結束">
          <el-date-picker
            v-model="queryFormPara.end_time"
            style="width: 180px"
            value-format="YYYY-MM-DD"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="狀態">
          <el-select v-model="queryFormPara.end_status" style="width: 80px;">
            <el-option :key="0" value=""></el-option>
            <el-option :key="1" value="是">是</el-option>
            <el-option :key="2" value="否">否</el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            color="#626aef"
            :icon="Search"
            style="width: 100px"
            @click="searchResult"
            >查詢</el-button
          >
        </el-form-item>
      </el-form>
      <vxe-table
        :data="tableData"
        :column-config="{ resizable: true }"
        :row-config="{ isHover: true }"
        align="center"
        stripe
      >
        <vxe-column type="seq" title="序號" width="60"></vxe-column>
        <vxe-column field="docid" title="單號">
          <template v-slot="{ row }">
            <span @click="showFlowDetail(row.docid)" class="trace-docid">{{
              row.docid
            }}</span>
          </template>
        </vxe-column>
        <vxe-column field="org_code" title="廠區"></vxe-column>
        <vxe-column field="current_flow_phase" title="當前流程"></vxe-column>
        <vxe-column field="applier" title="申請人"></vxe-column>
        <vxe-column field="apply_date" title="申請日期">
          <template v-slot="{ row }">
            <span>{{ formatter(row.apply_date) }}</span>
          </template>
        </vxe-column>
        <vxe-column field="last_update_time" title="異動日期">
          <template v-slot="{ row }">
            <span>{{ formatter(row.last_update_time) }}</span>
          </template>
        </vxe-column>
        <vxe-column field="end_status" title="是否結案"> </vxe-column>
      </vxe-table>
    </div>
    <div class="trace-flow-detail" v-if="showdetail">
      <el-row>
        <el-col style="text-align: right" :span="24">
          <el-icon :size="26" class="exit-icon">
            <CircleCloseFilled @click="closeDetail"></CircleCloseFilled>
          </el-icon>
        </el-col>
      </el-row>
      <vxe-table
        :data="flowitems"
        :column-config="{ resizable: true }"
        align="center"
        stripe
      >
        <vxe-column type="seq" title="序號" width="60"></vxe-column>
        <vxe-column field="flow_phase" title="所處流程"> </vxe-column>
        <vxe-column field="chinese_name" title="執行人"> </vxe-column>
        <vxe-column field="comments" title="意見"> </vxe-column>
        <vxe-column field="last_update" title="異動日期">
          <template v-slot="{ row }">
            <span>{{ formatter(row.last_update) }}</span>
          </template>
        </vxe-column>
        <vxe-column field="approve" title="審核結果"> </vxe-column>
      </vxe-table>
    </div>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="counts"
      v-model:current-page="queryFormPara.page"
      :hide-on-single-page="counts / 10 < 1"
      @current-change="handleCurrentChange"
      style="margin: 20px auto; width: 200px"
    />
  </main>
</template>
<style>
.due_to_box {
  color: black;
  width: 90%;
  margin: 20px auto;
  min-width: 800px;
}
.trace-docid {
  font-weight: bold;
}
.trace-docid:hover {
  cursor: pointer;
}

.trace-flow-detail {
  width: 50%;
  height: auto;
  position: absolute;
  top: 160px;
  left: 30%;
  background-color: rgba(55, 104, 160, 0.8);
  box-shadow: 3px 3px 3px 3px rgba(49, 47, 47, 0.5);
}
.exit-icon {
  color: #fff;
}
.exit-icon:hover {
  cursor: pointer;
  color: rgb(222, 44, 9);
  animation: spin 2s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
